<template>
  <section class="component implemnet-step">
    <el-form :model="formData" :rules="needErrorMsg? rules:{}" ref="implemnet-step-form" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="被执行人：" prop="executePerson">
            <el-input :disabled="isDetail" v-model="formData.executePerson" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行立案时间：" prop="executeTime">
            <el-date-picker :disabled="isDetail" v-model="formData.executeTime" type="datetime" placeholder="选择日期时间" :picker-options="$common.datePickDisabledDate(1)">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行立案法院：" prop="enforcementCourt">
            <!-- <el-select v-model="formData.enforcementCourt" filterable allow-create default-first-option placeholder="请选择法院">
              <el-option v-for="item in options5" :key="item" :label="item" :value="item">
              </el-option>
            </el-select> -->
            <el-input :disabled="isDetail" v-model="formData.enforcementCourt" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行案号：" prop="executeCaseNo">
            <el-input :disabled="isDetail" v-model="formData.executeCaseNo" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行标的：" prop="executeSubject">
            <!-- <el-input :disabled="isDetail" v-model="formData.executeSubject" maxlength="20" type="number"></el-input> -->
            <el-input type="text" :disabled="isDetail" v-model="formData.executeSubject" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行法官电话：" prop="executeJudgeTel">
            <el-input :disabled="isDetail" v-model="formData.executeJudgeTel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="评估公司：" prop="assessCompany">
            <el-input :disabled="isDetail" v-model="formData.assessCompany"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评估公司电话：" prop="assessCompanyTel">
            <el-input :disabled="isDetail" v-model="formData.assessCompanyTel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行费用：" prop="executeMoney">
            <el-input :disabled="isDetail" v-model="formData.executeMoney" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评估费用：" prop="assessMoney">
            <el-input :disabled="isDetail" v-model="formData.assessMoney" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="拍卖费用：" prop="auctionMoney">
            <el-input :disabled="isDetail" v-model="formData.auctionMoney" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆成交价：" prop="carPrice">
            <el-input :disabled="isDetail" v-model="formData.carPrice" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="执行备注：" prop="executeRemark">
        <el-input :disabled="isDetail" type="textarea" v-model="formData.executeRemark" maxlength="500" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div class="text-center">
      <el-button @click="previousStepEmit">上一步</el-button>
      <el-button v-if="isShow" @click="submit" :loading="submitLoading">保存</el-button>
      <el-button @click="nextStepEmit">下一步</el-button>
    </div>
  </section>
</template> 
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Emit, Watch } from "vue-property-decorator";
import { Dependencies } from '~/core/decorator';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import { State, Action, Getter, namespace } from "vuex-class";
import { MENU_CHANNEL } from "~/config/enum.config";
import { CaseLegalRecordService } from '~/services/domain-service/case-legalRecord.service';
const CollectionExecutionModule = namespace('collection-execution');
@Component({
  components: {}
})

export default class ImplementStep extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private otherData;
  @CollectionExecutionModule.Mutation private updateCurrentSavedStep;

  @Dependencies(CaseLegalRecordService) private caseLegalRecordService: CaseLegalRecordService;
  @Prop({ type: String, required: false }) private id;
  @Prop() private topInfo
  @Prop({ type: String }) private operatorId;
  @Prop({ type: Boolean }) private isDetail
  @Prop({ type: Boolean }) private needErrorMsg

  @State
  private userData: any;

  private formData: any = {
    legalStage: "EXECUTE",
    legalStatus: "EXECUTE",
    id: "",
    executePerson: "",
    executeTime: "",
    enforcementCourt: "",
    executeCaseNo: "",
    executeSubject: "",
    executeJudgeTel: "",
    assessCompany: "",
    assessCompanyTel: "",
    executeMoney: "",
    assessMoney: "",
    auctionMoney: "",
    carPrice: "",
    executeRemark: ""
  }
  private rules: any = {
    executePerson: [{ required: true, message: "请输入被执行人" }],
    executeTime: [{ required: true, message: "请选择执行立案时间" }],
    enforcementCourt: [{ required: true, message: "请输入执行立案法院" }],
    executeCaseNo: [{ required: true, message: "请输入执行案号" }],
    executeSubject: [{ required: true, message: "请输入执行标的" }]
  }
  private options5 = []
  private submitLoading: boolean = false

  @Emit('nextStep')
  private nextStepEmit () { }

  @Emit('previousStep')
  private previousStepEmit () { }

  @Emit('emitSuccess')
  private emitSuccess () {
    //查询执行立案法院名称去重
    this.caseOperatorPageService
      .queryExecuteCourtName()
      .subscribe(
        (data) => {
          if (data) {
            this.options5 = data
          }
        },
        (err) => {

        },
      );
    if (this.id) {
      this.showLegalInfoById(this.id);
    } else {
      // this.showLegalInfo();
    }
  }
  @Watch('topInfo')
  private showPersonalName (val) {
    this.formData.executePerson = val.personalName;
  }
  private get isShow () {
    const arr = [MENU_CHANNEL.Legal_personal, MENU_CHANNEL.Legal_team, MENU_CHANNEL.Assist_legal]
    if (arr.find(v => this.menuChannel === v)) {
      // 添加催记显示保存按钮 或编辑催记 与该登录用户一致显示
      if (!this.operatorId || this.operatorId === this.userData.id) return true
      else return false
    }
    return false
  }
  private mounted () {
    console.log('mounted',this.id);

    // //查询执行立案法院名称去重
    // this.caseOperatorPageService
    //   .queryExecuteCourtName()
    //   .subscribe(
    //     (data) => {
    //       if (data) {
    //         this.options5 = data
    //       }
    //     },
    //     (err) => {

    //     },
    //   );
    if (this.id) {
      this.showLegalInfoById(this.id)
    } else {
      // this.formData.executePerson = this.topInfo.personalName;
      // this.showLegalInfo();
    }
  }
  private showLegalInfoById (val) {
    console.log('showLegalInfoById setVal');

    // 列表详情
    const vals = { "caseLegalRecordId": val }
    this.caseLegalRecordService
      .getCaseLegalRecordById(vals)
      .subscribe(
        (data) => {
          if (data) {
            this.formData.id = data.id;
            if (data.isExecute === "YES") {
              this.formData.executePerson = data.executePerson;
            }
            this.formData.executeTime = data.executeTime;
            this.formData.enforcementCourt = data.enforcementCourt;
            this.formData.executeCaseNo = data.executeCaseNo;
            this.formData.executeSubject = data.executeSubject;
            this.formData.executeJudgeTel = data.executeJudgeTel;
            this.formData.assessCompany = data.assessCompany;
            this.formData.assessCompanyTel = data.assessCompanyTel;
            this.formData.executeMoney = data.executeMoney;
            this.formData.assessMoney = data.assessMoney;
            this.formData.auctionMoney = data.auctionMoney;
            this.formData.carPrice = data.carPrice;
            this.formData.executeRemark = data.executeRemark;
          }
        },
        (err) => {

        },
      );
  }



  private showLegalInfo () {
    console.log('showLegalInfo');

    //查询上一条催记是否结案，回显数据
    this.caseOperatorPageService
      .queryUnClossCaseLegalRecord(this.caseId)
      .subscribe(
        (data) => {
          if (data) {
            this.formData.id = data.id;
            if (data.isExecute === "YES") {
              this.formData.executePerson = data.executePerson;
            }
            this.formData.executeTime = data.executeTime;
            this.formData.enforcementCourt = data.enforcementCourt;
            this.formData.executeCaseNo = data.executeCaseNo;
            this.formData.executeSubject = data.executeSubject;
            this.formData.executeJudgeTel = data.executeJudgeTel;
            this.formData.assessCompany = data.assessCompany;
            this.formData.assessCompanyTel = data.assessCompanyTel;
            this.formData.executeMoney = data.executeMoney;
            this.formData.assessMoney = data.assessMoney;
            this.formData.auctionMoney = data.auctionMoney;
            this.formData.carPrice = data.carPrice;
            this.formData.executeRemark = data.executeRemark;
          }
        },
        (err) => {

        },
      );
  }


  private setCurrentFormDataVal (step) {
    this.updateCurrentSavedStep(step)
    sessionStorage.setItem('currentFormDataVal', JSON.stringify(this.formData))
    setTimeout(() => {
      // this.formData = JSON.parse(sessionStorage.getItem('currentFormDataVal') || "") || {}
      const formData = JSON.parse(sessionStorage.getItem('currentFormDataVal') || "") || {}
      this.toInitData(formData)
    }, 300);
  }

  private toInitData (data) {
    const  formData = { ...data }
    for (const key in this.formData) {
      if (![''].includes(key)) {
        formData[key] = ''
      }
    }
    this.formData = formData
  }

  private submit () {
    const form: any = this.$refs["implemnet-step-form"];
    form.validate(valid => {
      if (!valid) return false;
      if (this.menuChannel === MENU_CHANNEL.Assist_legal) {
        this.formData.assistId = this.otherData.assistId;
      }
      if (this.formData.executeTime) this.formData.executeTime = this.$filter.dateTimeFormat(this.formData.executeTime)
      this.formData.caseId = this.caseId;
      // this.formData.caseLegalRecordId = this.caseId;
      // this.formData.caseInfoRecordId = this.caseId;

      if (this.caseId && this.id) {
        // 回显当前步数
        this.setCurrentFormDataVal(2)

        this.caseLegalRecordService.editCaseLegalRecord(this.formData).subscribe(
          (data) => {
            form.resetFields();
            this.formData.id = "";
            this.emitSuccess();
            this.$message.success('法催催记立案已修改成功');
          },
          (err) => {
            this.submitLoading = false;
          },
        );
      } else {
        this.setCurrentFormDataVal(2)

        this.caseLegalRecordService.addCaseLegalRecord(this.formData).subscribe(
          (data) => {
            form.resetFields();
            this.formData.id = "";
            this.emitSuccess();
            this.$message.success('法催催记执行已添加成功，如需修改请在法务详情中进行修改');

          },
          (err) => {
            this.submitLoading = false;
          },
        );
      }

    });
  }

}

</script>